<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--破解防盗链-->
    <meta name="referrer" content="never">
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <title>豆瓣电影</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/top-bar-status.css">
    <script type="module" src="js/index.js" defer></script>
    <script src="./js/components.js"></script>
    <script src="./js/api.js" type="module"></script>
</head>
<body>
    <!--Header 耦合度爆炸-->
    <div id="top-nav-items">
        <ul id="top-nav-ul" style="display:inline-block;">
            <li>
                <span class="top-nav-item" onclick="alert('没有主页！哼😕')">豆瓣</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道读书！')">读书</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="window.location.href = './index.html'">电影</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道听音乐！')">音乐</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('啊这...我不好说了')">同城</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('就知道小组！')">小组</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('跟读书有区别吗？哼😕')">阅读</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('什么年代了还听广播 原来我也听那没事了')">FM</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('没时间啦 万策尽啦！！！😱')">时间</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('拒绝超前消费!')">豆品</span>
            </li>
        </ul>
        <div id="top-nav-right-items">
            <ul id="top-nav-right-ul">
                <li>
                    <span class="top-nav-item" onclick="alert('flutter在学了😭')">下载豆瓣客户端</span>
                </li>
                <li>
                    <span class="top-nav-item" id="login-nav-item">登录/注册</span>
                </li>
            </ul>
        </div>
    </div>
    <!--搜索栏-->
    <div id="search-area">
        <div id="search-content">
            <div id="nav-logo" onclick="window.location.href = './index.html'"></div>
            <div id="nav-search">
                <fieldset style="display: inline-flex;border: 0px;">
                    <label for="inp-query"></label>
                    <div class="inp">
                        <input id="inp-query" class="card" name="search_text" size="22" maxlength="60"
                                placeholder="搜索电影、电视剧、综艺、影人" autocompelete="off">
                    </div>
                    <div class="inp-btn">
                        <input type="submit" value="搜索">
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <div id="type-tab">
        <ul id="type-tab-ul" style="display:inline-block;margin-left: 237px;">
            <li>
                <span class="top-nav-item" onclick="alert('未实现')">影讯&购票</span>
            </li>
            <li>
                <span class="top-nav-item">选电影</span>
            </li>
            <li>
                <span class="top-nav-item">电视剧</span>
            </li>
            <li>
                <span class="top-nav-item">排行榜</span>
            </li>
            <li>
                <span class="top-nav-item">分类</span>
            </li>
            <li>
                <span class="top-nav-item">影评</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('未实现')">2021年度榜单</span>
            </li>
            <li>
                <span class="top-nav-item" onclick="alert('未实现')">2021书影音报告</span>
            </li>
        </ul>
    </div>
    <div style="display: inline-flex;width: 100%;height: 100px;justify-content: center;margin-top: 30px;margin-bottom: 30px;">
        <div id="banner"></div>
    </div>

    <h2 style="left: 230px;color: #494949;width: fit-content;position: relative;">选电影</h2>

    <script src="./js/sub/set-up-index-tab.js" type="module"></script>

    <separator-line></separator-line>

    <label class="checkbox-label" for="sort-newest"><input type="radio" id="sort-latest" name="sort" checked> 按最新排序  </label>
    <label class="checkbox-label" for="sort-hotest"><input type="radio" id="sort-hotest" name="sort"> 按热度排序  </label>

    <script src="./js/sub/set-up-index-rv.js" type="module"></script>

</body>
</html>